<template>
	<el-form
	  ref="loginForm"
	  :model="form"
	  :rules="rules"
	  label-width="0"
	  size="large"
	  @keyup.enter="login"
	  class="loginForm"
	>
	  <el-form-item prop="username">
		<el-input
		  v-model="form.username"
		  prefix-icon="el-icon-user"
		  clearable
		  :placeholder="$t('login.userPlaceholder')"
		>
		  <!-- <template #append>
			<el-select v-model="userType" style="width: 130px">
			  <el-option :label="$t('login.admin')" value="admin"></el-option>
			  <el-option :label="$t('login.user')" value="user"></el-option>
			</el-select>
		  </template> -->
		</el-input>
	  </el-form-item>
	  <el-form-item prop="password">
		<el-input
		  v-model="form.password"
		  prefix-icon="el-icon-lock"
		  clearable
		  show-password
		  :placeholder="$t('login.PWPlaceholder')"
		>
		</el-input>
	  </el-form-item>
	  <el-form-item prop="code" v-if="captchaEnabled">
		<el-input
		  class="code-input"
		  v-model="form.code"
		  clearable
		  placeholder="请输入验证码"
		>
		  <template #append>
			<el-image
			  @click="getCode"
			  style="width: 130px; height: 40px"
			  :src="codeUrl"
			/>
		  </template>
		</el-input>
	  </el-form-item>
	  <!-- <el-form-item style="margin-bottom: 10px">
		<el-col :span="12">
		  <el-checkbox
			:label="$t('login.rememberMe')"
			v-model="form.rememberMe"
		  ></el-checkbox>
		</el-col>
		<el-col :span="12" class="login-forgot">
		  <router-link to="/reset_password"
			>{{ $t("login.forgetPassword") }}？</router-link
		  >
		</el-col>
	  </el-form-item> -->
	  <el-form-item>
		<el-button
		  type="primary"
		  style="width: 100%"
		  :loading="islogin"
		  round
		  @click="login"
		  >{{ $t("LOGIN") }}</el-button
		>
	  </el-form-item>
	  <!-- <div class="login-reg">
		{{ $t("login.noAccount") }}
		<router-link to="/user_register">{{
		  $t("login.createAccount")
		}}</router-link>
	  </div> -->
	</el-form>
  </template>
  
  <script>
  import Cookies from "js-cookie";
  import sysConfig from "@/config";
  // import {testMenu} from './testMenu'
  export default {
	data() {
	  return {
		// userType: "admin",
		codeUrl: "",
		// 验证码开关
		captchaEnabled: true,
		form: {
		  username: "",
		  password: "",
		  rememberMe: true,
		  token: "",
		  code: "",
		},
		rules: {
		  username: [
			{
			  required: true,
			  message: this.$t("login.userError"),
			  trigger: "blur",
			},
		  ],
		  password: [
			{
			  required: true,
			  message: this.$t("login.PWError"),
			  trigger: "blur",
			},
		  ],
		  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
		},
		islogin: false,
	  };
	},
	watch: {
	  userType(val) {
		if (val == "admin") {
		  this.form.username = "admin";
		  this.form.password = "";
		} else if (val == "user") {
		  this.form.username = "user";
		  this.form.password = "user";
		}
	  },
	},
	mounted() {
	  this.getCode();
	  this.getCookie();
	},
	methods: {
	  async login() {
		var validate = await this.$refs.loginForm.validate().catch(() => {});
		if (!validate) {
		  return false;
		}
		this.islogin = true;
		if (this.form.rememberMe) {
		  //点击记录密码
		  // 缓存账号密码信息
		  this.$TOOL.cookie.set("USERNAME", this.form.username, {
			expires: this.form.rememberMe ? 24 * 60 * 60 : 0,
		  });
		  this.$TOOL.cookie.set(
			"PASSWORD",
			this.$TOOL.crypto.AES.encrypt(
			  this.form.password,
			  sysConfig.LS_ENCRYPTION_key
			),
			{
			  expires: this.form.rememberMe ? 24 * 60 * 60 : 0,
			}
		  );
		  this.$TOOL.cookie.set("REMEMBER_ME", this.form.rememberMe, {
			expires: this.form.rememberMe ? 24 * 60 * 60 : 0,
		  });
		} else {
		  // 未点击记录 清空账号密码信息
		  this.$TOOL.cookie.remove("USERNAME");
		  this.$TOOL.cookie.remove("PASSWORD");
		  this.$TOOL.cookie.remove("REMEMBER_ME");
		}
		//获取token
		try {
		  await this.$store.dispatch("Login", this.form);
		  await this.$store.dispatch("GetInfo"); //获取用户信息
		//   await this.$store.dispatch('email/setdefaultEmail'); //获取默认邮箱账号
		  // await this.$store.dispatch("GenerateRoutes"); //获取路由
		  this.$router.replace({
			path: "/",
		  });
		  this.$message.success("Login Success 登录成功");
		  this.islogin = false;
		} catch (error) {
		  this.islogin = false;
		  this.getCode();
		}
	  },
	  // 获取验证码
	  async getCode() {
		var res = await this.$API.auth.getCodeImg.get();
		if (this.captchaEnabled) {
		  let { img, token } = res.data;
		  this.codeUrl = "data:image/gif;base64," + img;
		  this.form.token = token;
		}
	  },
	  // 读取缓存的账号信息
	  getCookie() {
		const username = Cookies.get("username");
		const password = Cookies.get("password");
		const rememberMe = Cookies.get("rememberMe");
		this.form = {
		  username: username === undefined ? this.form.username : username,
		  password:
			password === undefined
			  ? this.form.password
			  : this.$TOOL.crypto.AES.decrypt(
				  password,
				  sysConfig.LS_ENCRYPTION_key
				),
		  rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
		};
	  },
	},
  };
  </script>
  
  <style scoped lang="scss">
  ::v-deep .code-input {
	.el-input-group__append {
	  padding: 0 !important;
	}
  }
  </style>
  